<template>
	<view class="main-wrap">
		<view class="fixed-screen">
			<view class="merchant-info bg-white">
				<image class="merchant-avatar" src="https://img.adidas.com.cn/resources/2019/7/26/15641286827893969_230X230.jpg"></image>
				<view class="name-date">
					<text>90号便利店</text>
					<!-- <text>店铺公告滚动展示</text> -->
				</view>
				<view class="share">
					<image class="share-icon" src="../../static/share.png"></image>
					<text class="text-gray">分享店铺</text>
				</view>
			</view>
			<view class="performance bg-white">
				<view class="per-item">
					<text>**</text>
					<text class="text-gray">今日访客</text>
				</view>
				<view class="per-item">
					<text>{{todyOrder.total}}</text>
					<text class="text-gray">今日订单数</text>
				</view>
				<view class="per-item">
					<text>{{todyOrder.money.toFixed(2)}}</text>
					<text class="text-gray">今日订单金额</text>
				</view>
			</view>
		</view>
		<view class="order-info bg-white">
			<view class="bg-white nav">
				<view class="flex text-center">
					<view class="cu-item flex-sub" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in orderStatusList" :key="index" @tap="tabSelect" :data-status="item.status" :data-id="index">
						{{item.title}}({{item.count}})
					</view>
				</view>
			</view>
			
			<view class="order-list" v-if="orderList.length > 0">
				<order-await v-for="(item, index) in orderList" :order="item" :key="index" v-if="TabCur==0"></order-await>
				<order-in-hand v-for="(item, index) in orderList" :order="item" :key="index" v-if="TabCur==1"></order-in-hand>
				<order-finashed v-for="(item, index) in orderList" :order="item" :key="index" v-if="TabCur==2"></order-finashed>
			</view>
			<view class="bg-gray" v-else>
				<text class="empty-tip">您暂时没有{{orderStatusList[TabCur].title}}的订单</text>
			</view>
		</view>
	</view>
</template>

<script>
	import order from '@/api/order.js'
	import orderAwait from '@/pages/component/order/await.vue';
	import orderInHand from '@/pages/component/order/inHand.vue'
	import orderFinashed from '@/pages/component/order/finashed.vue'
	export default {
		name: 'HomeView',
		components: {
			orderAwait,
			orderInHand,
			orderFinashed
		},
		data() {
			return {
				merchantId: '',
				orderList: [],
				todyOrder: {
					total: 0,
					money: 0
				},
				orderStatusList: [
					{
						title: '待确认',
						status: 1,
						count: 0
					},
					{
						title: '处理中',
						status: 2,
						count: 0
					},
					{
						title: '已完成',
						status: 3,
						count: 0
					}
				],
				orderStatus: 1,
				TabCur: 0
			}
		},
		created() {
			this.merchantId = uni.getStorageSync('merchantId');
			this.refresh();
			uni.$on('refreshOrder', this.refresh);	
		},
		methods: {
			initOrderCount() {
				order.findCountByMerchantId(this.merchantId).then(res => {
					const data = res.data.data;
					this.orderStatusList[0].count = data.confirm;
					this.orderStatusList[1].count = data.going;
					this.orderStatusList[2].count = data.finashed;
				});
			},
			initTodyOrder() {
				order.findTodyByMerchantId(this.merchantId).then(res => {
					this.todyOrder = res.data.data;
				});
			},
			initOrder() {
				order.find(this.merchantId, this.orderStatus).then(res => {
					this.orderList = res.data.data;
				});
			},
		    refresh() {
				this.initOrder();
				this.initOrderCount();
				this.initTodyOrder();
			},
			tabSelect(e) {
				const dataset = e.currentTarget.dataset;
				this.orderStatus = dataset.status;
				this.TabCur = dataset.id;
				this.refresh();
			}
		}
	}
</script>

<style scoped lang="less">
	.merchant-info{
		display: flex;
		position: relative;
		padding: 60rpx 0rpx 40rpx 30rpx;
		.action-icon{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			font-weight: 700;
		}
		.merchant-avatar{
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}
		.name-date{
			display: flex;
			flex: 1;
			flex-direction: column;
			margin-left: 20rpx;
		}
		.share{
			display: flex;
			flex-direction: column;
			align-items: center;
			.share-icon{
				width: 50rpx;
				height: 50rpx;
			}
			text{
				font-size: 22rpx;
			}
			padding-right: 15px;
		}
	}
	.performance{
		display: flex;
		padding-bottom: 15px;
		.per-item{
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			text:last-child{
				font-size: 22rpx;
			}
		}
	}
	.fixed-screen{
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: 1;
	}
	.order-info{
		margin-top: 394rpx;
		.nav{
			position: fixed;
			top: 142px;
			left: 0px;
			width: 100%;
			z-index: 1;
		}
		.order-list{
			margin-bottom: 100rpx;
		}
	}
	.empty-tip{
		display: block;
		width: 100%;
		text-align: center;
		padding-top: 50px;
	}
</style>
